<template>
  <!-- 风险广告留言 -->
  <div class="risk-comment-wrap">
    <a-spin class="comment-w" :loading="getLoading">
      <a-empty v-if="!commentList.length" />
      <div class="comment-item flex" v-for="(item, i) in commentList" :key="i">
        <a-avatar :style="{ backgroundColor: '#3370ff' }" :size="24">{{ showShortName(item) }}</a-avatar>
        <div class="comment-detail">
          <p>
            <span class="name">{{ item.createUserName }}</span>
            <span class="time">{{ $setTime(item.gmtCreate) }}</span>
          </p>
          <p class="comment">{{ item.comment }}</p>
        </div>
      </div>
    </a-spin>
    <div class="sent-comment flex-c">
      <a-textarea placeholder="" v-model="msgVal" allow-clear />
      <a-button :loading="submitLoading" type="primary" style="margin-left: 10px" @click="sendData">发送</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { commentDetail, commentAdd } from '@/api/advert'
  import { Message } from '@arco-design/web-vue'

  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  const emit = defineEmits(['update'])
  const msgVal = ref()
  const commentList = ref<Array<any>>([])
  const getLoading = ref(false)
  const submitLoading = ref(false)

  function showShortName(item: any) {
    return item.createUserName?.substring(0, 1)
  }
  // 获取评论列表
  async function getCommentList() {
    getLoading.value = true
    let res: any = await commentDetail({
      adType: props.currentData.adType,
      campaignId: props.currentData.campaignId,
      companyId: props.currentData.companyId,
      resourceId: props.currentData.resourceId,
      shopId: props.currentData.shopId,
      targetingType: props.currentData.targetingType,
    })
    getLoading.value = false
    commentList.value = res?.data || []
  }
  getCommentList()
  // 发送评论
  async function sendData() {
    if (!msgVal.value) {
      Message.error('请输入留言')
      return
    }
    submitLoading.value = true
    const res: any = await commentAdd({
      comment: msgVal.value,
      riskUniqueInfo: {
        adType: props.currentData.adType,
        campaignId: props.currentData.campaignId,
        companyId: props.currentData.companyId,
        resourceId: props.currentData.resourceId,
        shopId: props.currentData.shopId,
        targetingType: props.currentData.targetingType,
      },
    })
    submitLoading.value = false
    if (res) {
      getCommentList()
      msgVal.value = ''
      emit('update')
    }
  }
</script>

<style lang="less" scoped>
  .risk-comment-wrap {
    height: 100%;
    overflow: hidden;
    .comment-w {
      width: 100%;
      max-height: calc(100% - 70px);
      overflow-y: auto;
      .comment-item {
        margin-bottom: 20px;
        .arco-avatar {
          flex-shrink: 0;
        }
        .comment-detail {
          margin-left: 10px;
        }
        .time {
          margin-left: 10px;
          font-size: 12px;
          color: #999;
        }
        .comment {
          margin-top: 5px;
          line-height: 20px;
          max-width: 600px;
        }
      }
    }
    .sent-comment {
      width: 700px;
    }
  }
</style>
